<template>
	<div class="co_withdrawal">
		<div class="with_tab">
			<div :class="with_active == 1?'co_with_active':''" @click="with_active_click(1)">未领取</div>
			<div :class="with_active == 0?'co_with_active':''" @click="with_active_click(0)">已领取</div>
			<div :class="with_active == 2?'co_with_active':''" @click="with_active_click(2)">审核中</div>
			<span class="with_tab_Bar" :style="'left:calc('+with_Bar+'vw - 15px)'"></span>
		</div>

		<div class="with_can" ref='co_with_yi'>
			<div v-if="with_active == 0" >
				<div class="wiht_Already" v-for="(item,index) in wiht_Already" :key='index'>
					<div class="with_img">
						<img :src="item.cover" alt="">
					</div>
					<div class="with_text">
						<div>{{item.class_name}}</div>
						<div>{{item.title}}元</div>
						<div>{{item.create_time}}</div>
					</div>
					<div class="with_btn">
						<div style="background: #32af1e;">已领取</div>
					</div>
				</div>
				<div v-show='!with_kong1' class="with_jz_tt">{{with_jz_tt}}</div>
				<kong :type='type1' v-show='with_kong1'></kong>
			</div>

			<div v-if="with_active == 1">
				<div class="wiht_not" v-for="(item,index) in wiht_not" :key='index'>
					<div class="with_img">
						<img :src="item.cover" alt="">
					</div>
					<div class="with_text">
						<div>{{item.class_name}}</div>
						<div>{{item.title}}元</div>
						<div>{{item.create_time}}</div>
					</div>
					<div class="with_btn">
						<div style="background: #1eaf9c;" @click="with_money(item.distribution_id,item.money,item)">领取收益</div>
					</div>
				</div>
				<!-- <kong :type='type2' v-show='with_kong2'></kong> -->
				<div style="height: 70px;"></div>
				<div class="wiht_btn">
					<div @click="onekey_with">一键领取</div>
				</div>
			</div>

			<div v-if="with_active == 2">
				<div class="wiht_not" v-for="(item,index) in wiht_not" :key='index'>
					<div class="with_img">
						<img :src="item.cover" alt="">
					</div>
					<div class="with_text">
						<div>{{item.class_name}}</div>
						<div>{{item.title}}元</div>
						<div>{{item.create_time}}</div>
					</div>
					<div class="with_btn">
						<div v-if="item.status == 0" style="background: #ffc14a;">审核中</div>
						<div v-if="item.status == 2" style="background: #DA4131;">未通过</div>
					</div>
				</div>
				<kong :type='type2' v-show='with_kong2'></kong>
			</div>

		</div>
		<div class="co_with_tips" v-show="co_with_click" @click="co_with_status">
			<Tips :type='co_with'></Tips>
		</div>
	</div>
</template>

<script>
import {
  mapState
} from 'vuex'
import Tips from '@/components/public/Tips.vue'
import kong from '@/components/public/kong.vue'
import axios from 'axios'
export default {
  components: {
    Tips,
    kong
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  data () {
    return {
      with_jz_tt: '正在加载',
      type1: '已领取记录',
      with_kong1: true,
      type2: '可领取奖金',
      with_kong2: true,
      with_active: 1,
      with_Bar: 100 / 3 / 2,
      // 已领
      wiht_Already: [],
      // 待领
      wiht_not: [],
      co_with: '',
      co_with_click: false,
      with_box_height: 0,
      pageyi: 1,
      pagewei: 1,
      pageshen: 1,
      with_scroll_status: false
    }
  },
  created () {
    this.getNot_cash()
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.co_with_yi.addEventListener('scroll', this.cocoyi_scroll)
    })
  },
  beforeDestroyed () {
    this.$refs.co_with_yi.removeEventListener('scroll', this.cocoyi_scroll)
  },
  methods: {
    cocoyi_scroll () {
      var dom = this.$refs.co_with_yi
      var domheight = dom.offsetHeight
      var domscroll = dom.scrollTop
      console.log(domheight, domscroll)
      if (domheight + domscroll == this.with_box_height) {
        this.pageyi++
        if (!this.with_scroll_status) {
          this.getForward(1)
        }
      }
    },
    with_active_click (e) {
      if (e == 0) {
        this.with_active = 0
        this.with_Bar = 100 / 2
        this.getForward()
      } else if (e == 1) {
        this.with_active = 1
        this.with_Bar = 100 / 3 / 2
        this.getNot_cash(e)
      } else {
        this.with_active = 2
        this.with_Bar = 100 * (2 / 3) + 100 / 3 / 2
        this.getNot_cash(e)
      }
    },
    // 已领取
    getForward (e) {
      let requery = {
        app_id: this.app_id,
        member_id: this.user_id,
        page: this.pageyi,
        pageshow: 10
      }
      axios.post('http://web.zhiyunzaixian.com/chat/cash/forward', requery).then(res => {
        let {
          code,
          data
        } = res.data
        // console.log('已领取 forward', res)
        if (code == 200) {
          if (data.length < 10) {
            this.with_scroll_status = true
            this.with_jz_tt = '加载完毕'
          }
          this.with_kong1 = false
          this.wiht_Already = this.wiht_Already.concat(data)
          this.with_box_height = 90 * this.wiht_Already.length + 50
        } else {
          if (!this.with_scroll_status) {
            if (e == 1) {
              this.with_jz_tt = '加载完毕'
              this.with_scroll_status = true
              return
            }
            this.with_kong1 = true
          } else {
            this.with_jz_tt = '加载完毕'
            this.with_scroll_status = true
          }
        }
      })
    },
    // 带领去
    getNot_cash () {
      // console.log(e)
      let requery = {
        app_id: this.app_id,
        member_id: this.user_id,
        page: 1,
        pageshow: 10
      }
      // return
      axios.post('http://web.zhiyunzaixian.com/chat/cash/no_cash', requery).then(res => {
        let {
          code,
          data
        } = res.data
        console.log('待领取 no_cash', data)
        if (code == 200) {
          this.wiht_not = this.wiht_not.concat(data)
          this.with_box_height = 90 * this.wiht_not.length + 70
          // 						for (var i = 0; i < data.length; i++) {
          // 							if (data[i].type_zhanzhang) {
          // 								data[i].status = data[i].type_zhanzhang
          // 								data[i].money = data[i].recommender_money
          // 							}
          // 							if (data[i].type_url) {
          // 								data[i].status = data[i].type_url
          // 								data[i].money = data[i].commission_money
          // 							}
          // 							if (data[i].type_up) {
          // 								data[i].status = data[i].type_up
          // 								data[i].money = data[i].up_money
          // 							}
          // 						}

          // 						for (var i = 0; i < data.length; i++) {
          // 							if (data[i].status == 1) {
          // 								this.wiht_not.push(data[i])
          // 							}
          // 						}
          // 						if (this.wiht_not.length != 0) {
          // 							this.with_kong2 = false
          // 						} else {
          // 							this.with_kong2 = true
          // 						}
          // 						console.log('可以领取的',this.wiht_not)
          // 					} else {
          // 						this.with_kong2 = true
        }
      })
    },
    // 单领
    with_money (e, m, item) {
      let requery = {
        app_id: this.app_id,
        member_id: this.user_id,
        distribution_id: e,
        money: m
      }
      // 王加
      if (item.type_url) {
        requery.type = 'type_url'
      }
      if (item.type_up) {
        requery.type = 'type_up'
      }
      if (item.type_zhanzhang) {
        requery.type = 'type_zhanzhang'
      }
      // 王加
      axios.post('http://web.zhiyunzaixian.com/chat/cash/receive_money', requery).then(res => {
        let {
          code,
          data,
          msg
        } = res.data
        // console.log('领取结果', res)
        if (code == 200) {
          this.co_with_click = true
          this.co_with = '成功提取到零钱'
          this.getNot_cash(1)
        } else {
          this.co_with_click = true
          this.co_with = msg
        }
      })
    },
    // 一键
    onekey_with () {
      let requery = {
        app_id: this.app_id,
        member_id: this.user_id
      }
      axios.post('http://web.zhiyunzaixian.com/chat/cash/onekey_money', requery).then(res => {
        let {
          code,
          data,
          msg
        } = res.data
        console.log('领取结果', data)
        if (code == 200) {
          this.co_with_click = true
          this.co_with = '成功提取到零钱'
          this.getForward()
        } else {
          this.co_with_click = true
          this.co_with = msg
        }
      })
    },
    co_with_status () {
      this.co_with_click = false
    }
  }
}
</script>

<style>
	.with_jz_tt{
		width: 100%;
		height: 50px;
		line-height: 50px;
		font-size: 15px;
		color: #333333;
		text-align: center;
	}

	.co_with_tips {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.co_withdrawal {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.with_tab {
		width: 100vw;
		height: 44px;
		line-height: 44px;
		display: flex;
		position: relative;
		box-sizing: border-box;
	}

	.with_tab>div {
		flex: 1;
		text-align: center;
		font-size: 15px;
		color: #333333;
		border-bottom: 2px solid #E5E5E5;
	}

	.co_with_active {
		color: #1eaf9c !important;
		font-weight: bold;
	}

	.with_tab_Bar {
		position: absolute;
		left: 0;
		bottom: 2px;
		height: 3px;
		width: 30px;
		background: #1eaf9c;
		transition: all 0.5s cubic-bezier(1, 0, 0, 0.97);
	}

	.with_can {
		width: 100vw;
		height: calc(100vh - 47px);
		background: #f8f8f8;
		overflow: scroll;
	}

	.wiht_Already,
	.wiht_not {
		display: flex;
		height: 85px;
		background: white;
		margin-bottom: 5px;
	}

	.with_img {
		width: 85px;
		display: flex;
	}

	.with_img>img {
		width: 59px;
		height: 59px;
		margin: 13px;
		object-fit: cover;
	}

	.with_text {
		flex: 1;
		overflow: hidden;
	}

	.with_text>div:nth-child(1) {
		font-size: 15px;
		color: #333333;
		margin-top: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.with_text>div:nth-child(2) {
		font-size: 12px;
		color: #999999;
		margin-top: 4px;
	}

	.with_text>div:nth-child(3) {
		font-size: 13px;
		color: #999999;
		margin-top: 4px;
	}

	.with_btn {
		width: 87px;
		overflow: hidden;
		font-size: 12px;
	}

	.with_btn>div {
		width: 63px;
		height: 26px;
		line-height: 26px;
		border-radius: 7px;
		background: #000000;
		color: white;
		text-align: center;
		margin: 30px 13px;
	}

	.wiht_btn {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 71px;
		z-index: 1;
		background: #f8f8f8;
		overflow: hidden;
		display: flex;
	}

	.wiht_btn>div {
		width: 190px;
		height: 39px;
		background: #1eaf9c;
		border-radius: 7px;
		font-size: 13px;
		color: white;
		text-align: center;
		line-height: 39px;
		margin-top: 16px;
		margin-left: calc(50% - 95px);
	}
</style>
